<template>
  <div v-loading="loading" class="basic-page">
    <div class="title">{{ item.label }}</div>
    <el-form ref="actionForm" class="form" :model="actionForm" :rules="rules" label-position="top" label-width="100px">
      <el-form-item label="用户账号" prop="username">
        <el-input v-model.trim="actionForm.username" clearable readonly />
      </el-form-item>
      <el-form-item label="真实姓名" prop="realName">
        <el-input v-model.trim="actionForm.realName" clearable />
      </el-form-item>
      <el-form-item label="手机号码" prop="telephoneNumber">
        <el-input v-model.trim="actionForm.telephoneNumber" clearable />
      </el-form-item>
      <el-form-item label="电子邮箱" prop="mail">
        <el-input v-model.trim="actionForm.mail" clearable />
      </el-form-item>
      <el-form-item>
        <el-button @click="resetForm('actionForm')">重置</el-button>
        <el-button type="primary" :loading="btnLoading" @click="submitForm('actionForm')">{{ btnLoading === true ? '提交中' : '更新基本信息' }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getUser, updateUser } from '@/api/user'
import { validMail, validPhone } from '@/utils/validate'
export default {
  name: 'Basic',
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      loading: false,
      btnLoading: false,
      actionForm: {},
      rules: {
        username: [
          { required: true, message: '请输入用户账号', trigger: 'blur' }
        ],
        realName: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' }
        ],
        telephoneNumber: [
          { validator: validPhone, required: true, trigger: 'blur' }
        ],
        mail: [
          { validator: validMail, required: true, trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    const user = JSON.parse(sessionStorage.getItem('user'))
    if (user && Object.keys(user).length) {
      this.actionForm = user
    } else {
      this.fetchUser()
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.fetchUpdate()
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.actionForm.realName = ''
      this.actionForm.telephoneNumber = ''
      this.actionForm.mail = ''
      this.$refs[formName].clearValidate()
    },
    async fetchUser() {
      this.loading = true
      try {
        const res = await getUser()
        this.actionForm = res.data
        sessionStorage.setItem('user', JSON.stringify(this.actionForm))
        this.$store.commit('user/SET_USER_INFO', this.actionForm)
      } finally {
        this.loading = false
      }
    },
    async fetchUpdate() {
      this.btnLoading = true
      const form = JSON.parse(JSON.stringify(this.actionForm))
      form.roles = form.roles.map(item => {
        return item.id
      })
      try {
        await updateUser(form)
        this.$message({
          message: '修改用户基本信息成功',
          type: 'success',
          duration: 2 * 1000
        })
        sessionStorage.setItem('user', JSON.stringify(this.actionForm))
        this.$store.commit('user/SET_USER_INFO', this.actionForm)
      } finally {
        this.btnLoading = false
      }
    }
  }
}
</script>

<style scoped>
</style>
